<template>
  <el-row :gutter="10">
    <el-col :span="7">类型</el-col>
    <el-col :span="17">{{ activeVO?.type }}</el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">唯一标识</el-col>
    <el-col :span="17">
      <!-- <el-input :value="activeVO?.uuid" readonly></el-input> -->
      <el-input v-model="activeVO.uuid"></el-input>
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">名称</el-col>
    <el-col :span="10">
      <el-input v-model="activeVO.name"></el-input>
    </el-col>
    <el-col :span="4">
      <el-button v-if="activeVO?.userData?.type === 'equipment'" @click="handleChangeEquipment"
        >修改设备</el-button
      >
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">位置</el-col>
    <el-col :span="17">
      <Bvector v-model="activeVO.position"></Bvector>
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">旋转</el-col>
    <el-col :span="17">
      <Bvector v-model="activeVO.rotation"></Bvector>
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">缩放</el-col>
    <el-col :span="17">
      <Bvector v-model="activeVO.scale"></Bvector>
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">可见性</el-col>
    <el-col :span="17">
      <el-checkbox v-model="activeVO.visible"></el-checkbox>
    </el-col>
  </el-row>
  <el-row v-if="activeVO?.userData?.type === 'roadway'" :gutter="10">
    <el-col :span="7">坐标数据</el-col>
    <el-col :span="17" class="user-select">
      <div v-for="point in activeVO.geometry.parameters.path.points" class="point">
        <span>{{ point.x.toFixed(4) }}</span>
        <span>{{ point.z.toFixed(4) }}</span>
        <span>{{ point.y.toFixed(4) }}</span>
      </div>
      <el-button v-if="!activeVO._isEditor" style="margin-top: 10px" @click="handleEditModel"
        >编辑模式</el-button
      >
      <el-button v-else style="margin-top: 10px" @click="handleCloseEditModel"
        >关闭编辑模式</el-button
      >
      <el-button style="margin-top: 10px" @click="handleChangeCoordinates">详情修改</el-button>
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="7">自定义数据</el-col>
    <el-col :span="17">
      <el-input
        v-model="userData"
        type="textarea"
        :autosize="{ minRows: 4, maxRows: 8 }"
      ></el-input>
    </el-col>
  </el-row>
  <!-- 设备编辑 -->
  <roadwayForm v-model="showRoadwayForm" type="edit"></roadwayForm>
  <equipmentForm v-model="showEquipmentForm" type="edit"></equipmentForm>
</template>
<script setup lang="ts">
import { useActiveObject } from '@renderer/stores/activeObject'
import { storeToRefs } from 'pinia'
import { MathUtils } from 'three'
import { computed, ref } from 'vue'
import Bvector from '@renderer/components/b-vector.vue'
import roadwayForm from '@renderer/pages/titlebar/menu/add/roadwayForm.vue'
import useEditor from '@renderer/utils/useEditor'
import { updatePoint } from '@renderer/api'
import equipmentForm from '@renderer/pages/titlebar/menu/add/equipmentForm.vue'

const activeObjectStore = useActiveObject()
const { activeVO } = storeToRefs(activeObjectStore)

const userData = computed({
  get: () => JSON.stringify(activeVO.value.userData.customData),
  set: (val) => {
    if (activeVO.value) {
      activeVO.value.userData.customData = JSON.parse(val)
    }
  }
})
const showRoadwayForm = ref(false)
function handleChangeCoordinates() {
  showRoadwayForm.value = true
}
const { createdRoadwayEdit, closeEditor } = useEditor()
function handleEditModel() {
  createdRoadwayEdit(activeVO.value.geometry.parameters.path.points)
}

const showEquipmentForm = ref(false)
function handleChangeEquipment() {
  showEquipmentForm.value = true
}

async function handleCloseEditModel() {
  if (activeVO.value) {
    const { data } = await updatePoint({
      tunnelName: activeVO.value.name,
      tunnelId: activeVO.value.uuid,
      pointDtos: activeVO.value.geometry.parameters.path.points
    })

    activeVO.value.uuid = data.tunnelId
    // activeVO.value.userData.tunnelId = data.tunnelId

    closeEditor()
  }
}
</script>
<style lang="scss" scoped>
.user-select {
  user-select: all;
}

.point {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  &:not(:last-child) {
    margin-bottom: 3px;
  }
}
</style>
